<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Login</title>
</head>

<body>
    <div class="container">
        <br />
        <div class="row">
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'><button type="submit" class="form-control btn btn-info" id='logout'>logout</button></div>
        </div>
        <br />
        <br />
        <br />   
        <nav class="nav nav-pills nav-justified">
            <a class="nav-item nav-link" href="main.html">任务管理</a>
            <a class="nav-item nav-link" href="client.html" id='client-manage'>接入子系统管理</a>
            <a class="nav-item nav-link" href="user.html" id="user-manage">用户管理</a>
            <a class="nav-item nav-link active" href="#">任务运行历史</a>
          </nav>
        <br />
        <hr />
        <div class="row">
            <div class='col-md-2'>
                <label> &nbsp;</label>
            </div>
            <form id='history-list'>
                <div class="row">
                    <div class="col admin">
                        <label for="systemId">System Id</label>
                        <input type="text" class="form-control" name='systemId' id='systemId'>
                    </div>
                    <div class='col'>
                        <label> &nbsp;</label>
                        <button type="submit" class="form-control btn btn-primary">查询</button>
                    </div>
                  </div>
            </form>
            <div class='col-md-1'>
                <label> &nbsp;</label>
            </div>
        </div>
        <hr />
        <table class="table">
            <thead>
              <tr>
                <th scope="col">子系统编号</th>
                <th scope="col">任务名称</th>
                <th scope="col">运行实例</th>
                <th scope="col">运行状态</th>
                <th scope='col'>开始时间</th>
                <th scope='col'>结束时间</th>
                <th scope='col'>备注信息</th>
                <th scope='col' id='col-operate'>操作</th>
              </tr>
            </thead>
            <tbody id='client-list-body'></tbody>
          </table>
    </div>
</body>
<script src="script/jquery-3.0.0.min.js"></script>
<script src="script/util.js"></script>
<script>
'use strict';
(function(){
    $('#add-client').bind('click', function() {
        window.location.href = 'client-modify.html';
    });

    var rerun = function(id) {
        var data = {
            runId: id
        };
        $.ajax({
            url:'/admin/history/rerun',
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"POST",
            data: JSON.stringify(data),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    alert('done');                                 
                }else {
                    alert(response.message);
                }
                
            }
        });
    };

    var queryClientList = function(query) {
        $.ajax({
            url:'/admin/history/list',
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"POST",
            data: JSON.stringify(query),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    $('#client-list-body').children().remove();
                    var clientList = response.data;
                    if (clientList === undefined || clientList.length == 0) {
                        return;
                    }
                    clientList.forEach(function(value, idx) {
                        var id = value.idJobRunHistory;
                        $('#client-list-body').append("<tr id='" + id + "'>\
                                <th scope='row'>" + value.clientInfo.systemId + "</th>\
                                <td>" + value.clientInfo.systemName + "</td>\
                                <td>" + value.instance + "</td>\
                                <td>" + value.status + "</td>\
                                <td>" + value.runBeginTime + "</td>\
                                <td>" + value.runEndTime + "</td>\
                                <td>" + value.remark + "</td>\
                                <td>\
                                <button type='submit' class='form-control btn btn-light' id='rerun-" + id +"'>重新运行</button>\
                                </td>\
                            </tr>");

                        if(role === 'ADMIN' || role === 'OPERATOR') {
                            if(value.taskInfo.taskType === 'SINGLE') {
                                $('#rerun-' + id).bind('click', function() {
                                    rerun(id);
                                })
                            }
                            
                        }else {
                            $('#rerun-' + id).hide();
                            $('#col-operate').hide();
                        }
                        
                    });                                 
                }else {
                    alert(response.message);
                }
                
            }
        });
    }

    $('#client-list').submit(function(e) {
        e.preventDefault();
        var data = {
            systemId: $('#systemId').val()
        };
        queryClientList(data);
    })
    
    queryClientList({});
   //bottom     
})();
</script>
</html>